<template>
  <div class="login">
    <van-form @submit="onSubmit" class="form">
      <van-field
        class="input"
        v-model="username"
        name="username"
        label="用户名"
        placeholder="请输入用户名"
        :rules="[{ required: true }]"
      />
      <van-field
        class="input"
        v-model="avatar"
        name="avatar"
        label="选择头像"
        placeholder="请选择头像"
        :rules="[{ required: true }]"
      />

      <van-grid :column-num="5" :gutter="10">
        <van-grid-item v-for="value in 10" :key="value">
          <van-image
            class="avatar"
            :class="{ active: active === value }"
            :src="require(`@/assets/images/${value}.jpeg`)"
            @click="active = value"
          />
        </van-grid-item>
      </van-grid>

      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
// import io from 'socket.io-client'
// const socket = io('ws://127.0.0.1:3000')
export default {
  name: 'Login',
  components: {},
  data() {
    return {
      username: '',
      active: 0
    }
  },
  mounted() {},
  methods: {
    onSubmit(userInfo) {
      this.$socket.connect()
      this.$socket.emit('login', userInfo, (state) => {
        if (state) {
          this.$toast.success('登录成功!')
          this.$router.push({
            name: 'Chat'
          })
        } else {
          this.$toast.fail('登录失败,用户名已经存在!')
        }
      })
    }
  },
  computed: {
    avatar: {
      get() {
        return this.active === 0 ? '' : this.active
      },
      set(newVal) {
        return newVal > 0 && newVal < 11 ? newVal : ''
      }
    }
  }
}
</script>
<style lang="less" scoped>
.login {
  width: 100%;
  height: 100vh;
  background-image: url('~@/assets/images/11.jpeg');
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  .input {
    height: 44px;
    margin: 10px;
  }
  .van-cell {
    width: auto;
    background-color: rgba(255, 255, 255, 0.452);
  }
  .form {
    margin-top: 60px;
    // background-color: rgb(39, 197, 33);
    /deep/ .van-grid-item__content {
      padding: 0px;
      width: 60px;
      height: 60px;
      background-color: transparent;
    }
    /deep/.van-image__img {
      border-radius: 50%;
    }
    /deep/.avatar {
      overflow: hidden;
      &.active {
        border: 2px solid rgb(51, 6, 250);
      }
    }
  }
}
</style>
